<template>
	<div class="loadding-icon">
		<svg class="circular" :style="{width:size,height:size}" viewBox="25 25 50 50"><circle class="path" cx="50" cy="50" r="20" fill="none"></circle></svg>
	</div>
</template>

<script>
	export default{
		props:{
			size:{
				type:String,
				default:'40px'
			}
		}
	}
</script>

<style lang="scss">
.loadding-icon {
	display: inline;
	.circular {
		display: inline;
		animation: loading-rotate 2s linear infinite;
		.path {
			animation: loading-dash 1.5s ease-in-out infinite;
			stroke-dasharray: 90, 150;
			stroke-dashoffset: 0;
			stroke-width: 2;
			stroke: #409eff;
			stroke-linecap: round;
		}
	}
}
@keyframes loading-rotate {
	100% {
		transform: rotate(360deg);
	}
}
@keyframes loading-dash{
	0% {
	    stroke-dasharray: 1,200;
	    stroke-dashoffset: 0;
	}
	
	50% {
	    stroke-dasharray: 90,150;
	    stroke-dashoffset: -40px;
	}
	100% {
	    stroke-dasharray: 90,150;
	    stroke-dashoffset: -120px;
	}
}
</style>
